<script lang="ts" setup>
// import { PhotoConsumer, PhotoProvider } from 'vue3-photo-preview'
import 'vue3-photo-preview/dist/index.css'

// const imgList = ['./xxx.jpg', '凯乐.jpg']
// const count = ref(0)
// const load = () => {
//   console.log('loading...')
//   count.value += 1
// }
import axios from 'axios'
import _ from 'lodash-es'

// Define reactive variables
const items = ref([])
const loading = ref(false)
const page = ref(1)
const error = ref(false)
const errorMessage = ref('')
const noMoreData = ref(false)

// Function to fetch data
const fetchData = async () => {
  if (loading.value || noMoreData.value) return
  loading.value = true
  error.value = false
  try {
    const { data } = await axios.get(`http://localhost:5173/api/photo/list?page=${page.value}`)
    if (data.data.length === 0) {
      noMoreData.value = true
    } else {
      items.value.push(...data.data)
      page.value += 1
    }
  } catch (err) {
    console.error('Error fetching data', err)
    error.value = true
    errorMessage.value = 'Failed to load data! Please try again later.'
  } finally {
    loading.value = false
  }
}

// Function to handle scroll event
const handleScroll = _.debounce(async (event) => {
  console.log(event)
  const bottomReached = event.target.scrollHeight - event.target.scrollTop === event.targetHeight
  if (bottomReached) {
    await fetchData()
  }
}, 200)

const scroll = ref()

// Fetch initial data when component is mounted
onMounted(() => {
  fetchData()
  scroll.value.addEventListener('scroll', handleScroll, true)
})

onUnmounted(() => {
  scroll.value.removeEventListener('scroll', handleScroll, true)
})
</script>

<template>
  <div class="pic-preview">
    <!--    <photo-provider>-->
    <!--      <photo-consumer v-for="src in imgList" :intro="src" :key="src" :src="src">-->
    <!--        <img :src="src" class="view-box" />-->
    <!--      </photo-consumer>-->
    <!--    </photo-provider>-->
  </div>
  <div class="infinite-scroll-container" ref="scroll" @scroll="handleScroll">
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <div v-if="loading" class="loading-indicator">Loading...</div>
    <div v-if="error" class="error-ind">{{ errorMessage }}</div>
    <div v-if="noMoreData" class="no-more-data-indicator">No More Data</div>
  </div>
  <!--  <ul v-infinite-scroll="load" class="infinite-list">-->
  <!--    <li v-for="i in count" :key="i" class="infinite-list-item">-->
  <!--      <el-card style="width: 100%">-->
  <!--        <template #header>照片信息</template>-->
  <!--        <div class="photo-container">-->
  <!--          <img-->
  <!--            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"-->
  <!--            style="width: 100px; height: 100px"-->
  <!--          />-->
  <!--          <img-->
  <!--            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"-->
  <!--            style="width: 100px; height: 100px"-->
  <!--          />-->
  <!--          <img-->
  <!--            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"-->
  <!--            style="width: 100px; height: 100px"-->
  <!--          />-->
  <!--          <img-->
  <!--            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"-->
  <!--            style="width: 100px; height: 100px"-->
  <!--          />-->
  <!--        </div>-->
  <!--      </el-card>-->
  <!--    </li>-->
  <!--  </ul>-->
</template>

<style scoped>
.infinite-list {
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list .infinite-list-item {
  display: flex;
  justify-content: center;
  background: transparent;
  margin: 10px;
  color: var(--el-color-primary);
}

.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}

.photo-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  justify-items: center;
}
.pic-preview {
  width: 800px;
  height: 600px;
  position: absolute;
  top: 50vh;
  left: 50vw;
}

.infinite-scroll-container {
  height: 100vh;
  overflow-y: auto;
  background-color: greenyellow;
}
.loading-indicator {
  text-align: center;
}
</style>
